window.onload=function(){
    //搜索框
    search()
    //返回顶部
    returnTop()
    //轮播图
    Shuffling()
    //倒计时
    time()
    setInterval(time,1000)
    // jd_app()
    
}

//搜索效果
function search() {
    var banner=document.querySelector('.banner')
    var search=document.querySelector('.box')
     var returnTop = document.querySelector('.returnTop')
    var  opacity = 0.85
    window.onscroll=function(){
        var width=banner.offsetWidth
        if(window.pageYOffset>width) {
            search.style.opacity=0.85
            returnTop.style.display='block'

        }else {
            opacity = (width * opacity) / pageYOffset
            search.style.opacity=opacity
            returnTop.style.display='none'
        }
    }
}
//返回顶部
function returnTop() {
    var returnTop = document.querySelector('.returnTop')
    returnTop.onclick=function(){
        animation(window,0)
    }
}

//轮播图
// function Shuffling() {
//     var banner_box=document.querySelector('.banner_box')
//     var ul =banner_box.querySelector('ul')
//     var lis=ul.querySelectorAll('ul>li')
//     var imgWidth=ul.querySelector('img')
//     var ol = banner_box.querySelector('ol')
//     var dots= ol.querySelectorAll('li')
//     //自动播放
//     var index=0
//     var num=0
//     var dance=imgWidth.offsetWidth
//     ul.style.left= -dance + 'px'
//      dots[0].className='active'
//     var timer = setInterval(function(){
//         index++
//          num++
//         if(index>lis.length-1){
//             index=1
//             var dance=imgWidth.offsetWidth
//         }else {
//             var dance=index*imgWidth.offsetWidth
//             ul.style.left= -dance + 'px'
//         }
//         //清除默认样式
//         for(var i=0;i<dots.length;i++){
//             dots[i].className=''
//         }
//         if(num>=dots.length) {
//         dots[0].className='active'
//         num=0  
//         }else{
//             dots[num].className='active'
//             }      
//     },1000)

//     // 触摸事件
// //    var  displacementStart=0
// //    var displacementMove=0
// //     banner_box.addEventListener('touchstart',function(e){
// //         clearInterval(timer)
// //         displacementStart= e.touches[0].clientX
// //     })
// //     banner_box.addEventListener('touchmove',function(e){
// //         displacementMove= e.touches[0].clientX
// //         var location = displacementMove -  displacementStart
// //         console.log(location);
// //         ul.style.transition='all 2s'
// //         if(location<=dance/3)  {
// //             ul.style.transform='translateX('+index*imgWidth.offsetWidth+location+'+"px")'
// //         }else {

// //         }
// //     })
// //     banner_box.addEventListener('touchend',function(){
// //         console.log(13);
// //     })
    
    
// }



// function jd_app(){
//     var jd_app=document.querySelector('.jd_app')
    
//         jd_app.onclick=function(){
//             this.style.right=this.offsetWidth
//             if(jd_app.style.right==this.offsetWidth){
//                 jd_app.style.right=0
//         }
//     }
    
// }

function Shuffling() {
       var banner_box=document.querySelector('.banner_box')
       var ul =banner_box.querySelector('ul')
       var lis=ul.querySelectorAll('ul>li')
       var imgWidth=ul.querySelector('img')
       var ol = banner_box.querySelector('ol')
       var dots= ol.querySelectorAll('li')
       //自动播放
       var width = imgWidth.offsetWidth
       var index = 1
    ul.style.transform='translateX('+(width*-index)+'px)'  
       var timer = setInterval(function(){
           index++ 
            ul.style.transition='all 0.2s'
            ul.style.transform='translateX('+(width*-index)+'px)'         
       },2000)
       ul.addEventListener('transitionend',function(){
        if(index>=lis.length-1) {
            index=1
            ul.style.transition=''
            ul.style.transform='translateX('+(width*-index)+'px)' 
            // index=0
        }else if(index<=0){
            index=6
            ul.style.transform='translateX('+(width*-(index+1))+'px)' 
        }
         setPont()
        //小圆点
    })     
       function setPont() {
        for(var i=0;i<dots.length;i++){
            dots[i].classList.remove('active')
        }
        dots[index-1].classList.add('active')
    }


     var startX=0
      var distanceX=0
      var flag=false
      ul.addEventListener('touchstart',function(e){
          clearInterval(timer)
          startX=e.touches[0].clientX   
      })
      ul.addEventListener('touchmove',function(e){
        var  moveX=e.touches[0].clientX
        distanceX= moveX - startX
         // 目前的位置 
         var translateX=width*-index+ distanceX
         ul.style.transition='all 0.2s'
         ul.style.transform='translateX('+translateX +'px)'
         flag=true
 
      })
      ul.addEventListener('touchend',function(){
          if(flag) {
              if(Math.abs(distanceX)<width/3){
                 ul.style.transition='all 0.2s'
                 ul.style.transform='translateX('+(width*-index)+'px)' 
              }else {
                 if(distanceX>0){
                     index--
                 }else{
                     index++
                 }
                 ul.style.transition='all 0.2s'
                 ul.style.transform='translateX('+(width*-index)+'px)' 
              }
          } 
           clearInterval(timer)
           timer= setInterval(function(){
               index++ 
               ul.style.transition='all 0.2s'
               ul.style.transform='translateX('+(width*-index)+'px)'  
          },2000)
          //重置参数
           startX=0
           distanceX=0
           flag=false
      })
}

//时间
function time(futureTime){
    var futureTime=+new Date('2021-8-31 22:19:35')
    var time=document.querySelector('.time')
    var time_h = time.querySelector('.time_h')
    var time_m = time.querySelector('.time_m')
    var time_s = time.querySelector('.time_s')
    var newTime=+new Date()
    //总秒数
    var ms=futureTime - newTime / 1000
    var s= parseInt(ms%60)
    s= s <10 ? '0' + s : s
    time_s.innerHTML= s
    var h = parseInt(ms / 60 / 60%24)
    h= h <10 ? '0' + h : h
    time_h.innerHTML= h
    var m= parseInt(ms /60%60)
    m= m <10 ? '0' + m : m   
    time_m.innerHTML= m
}
    

//动画
function animation(obj,target,callback) {
    clearInterval(obj.timer)
    var speed = (target - obj.pageYOffset) / 10
    speed > 0 ? Math.ceil(speed) : Math.floor(speed)
    obj.timer=setInterval(function(){
        if (target==obj.pageYOffset) {
            clearInterval(obj.timer)
            callback && callback()
        }else {
            // obj.style.left= (target.offsetLeft + speed) + 'px'
            window.scroll(0,target.offsetLeft + speed)
        }
    },15)
}